import React, {useState, useRef, useEffect} from 'react';
import { Tabs, Select, Radio, Icon, Form } from 'antd';
import moment from 'moment';
import Teps from './teps'
import Teps1 from './teps1'
import Teps2 from './teps2'
const {TabPane} = Tabs
const {Option} = Select
function tabsMent(props) {
  const [options, setOptions] = useState([]);
  const [timeType, setTimeType] = useState('4')
  const [typeSelect, setTypeSelect] = useState('1');
  // const [grainType, setGrainType] = useState('request');
  const grainType = 'request'
  const [stepType, setStepType] = useState('total');
  const [tabsClick, setTabsClick] = useState('1');
  // const [isPercentage, setIsPercentage] = useState(false); // 百分比加%
  const isPercentage = false
  const [isDisable, setIsDisable] = useState(false); // 是否禁用一些选择
  const tepsNode = useRef(null);
  const teps1Node = useRef(null);
  const teps2Node = useRef(null);
  useEffect(() => {
    const endTime = moment(props.requestParam.end).valueOf();
    const startTime = moment(props.requestParam.start).valueOf();
    const times = moment(endTime).diff(moment(startTime), 'days');
    if (times > 40) {
      setIsDisable(true);
    } else {
      setIsDisable(false);
    }
    if (times < 7 ) {
      setTimeType('4');
    } else if (times > 7 && times < 120 ) {
      setTimeType('5');
    } else if (times > 120)  {
      setTimeType('6');
    }
  },[props.requestParam])
  useEffect(()=> {
    setOptions(requesList);
  },[])
  const requesList = [{
    name: '请求总量',
    value: 'total'
  },{
    name: '拒绝请求量',
    value: 'reject'
  },{
    name: '复核请求量',
    value: 'review'
  },{
    name: '通过请求量',
    value: 'pass'
  }];
  // const ratioList = [{
  //   name: '拒绝率',
  //   value: 'reject'
  // },{
  //   name: '复核率',
  //   value: 'review'
  // },{
  //   name: '通过率',
  //   value: 'pass'
  // }];
  // function onChange(value) {
  //   setGrainType(value);
  //   if (value === 'rdtio') {
  //     setIsPercentage(true);
  //     setOptions(ratioList);
  //     setStepType('reject');
  //   } else {
  //     setIsPercentage(false);
  //     setOptions(requesList);
  //     setStepType('total');
  //   }
  // }
  // 颗粒度
  function handleChange(value) {
    setTimeType(value);
  };
  function getGroupChange(e) {
    setTypeSelect(e.target.value)
  };
  // 第二步
  function handleStepChange(value) {
     setStepType(value);
  };
  // 策略切换
  function handTabChange(value) {
    console.log('数据啊啊啊', value)
    setTabsClick(value)
  }
   // 下载
   function downFile () {
     const params = {
       '1': tepsNode,
       '2': teps1Node,
       '3': teps2Node
     }
     const data = params[tabsClick].current.downData();
    props.downFile && props.downFile(data, 'd3');
  };
  return (
    <div className='tabs-ment-page'>
      <Tabs defaultActiveKey="1" onChange={handTabChange}>
        <TabPane tab="策略分析" key="1">
           <Teps 
             type={typeSelect}
             {...props}
             ref={tepsNode}
             grainType={grainType}
             isPercentage={isPercentage}
             stepType={stepType}
             timeType={timeType}
             tabsClick={tabsClick}
             ></Teps>
        </TabPane>
        <TabPane tab="组件分析" key="2">
          <Teps1 
            type={typeSelect}
            {...props}
            ref={teps1Node}
            grainType={grainType} 
            isPercentage={isPercentage}
            stepType={stepType}
            timeType={timeType}
            tabsClick={tabsClick}
          ></Teps1>
        </TabPane>
        <TabPane tab="规则分析" key="3">
          <Teps2 
            type={typeSelect}
            {...props}
            ref={teps2Node}
            grainType={grainType} 
            isPercentage={isPercentage}
            stepType={stepType}
            timeType={timeType}
            tabsClick={tabsClick}
          ></Teps2>
        </TabPane>
      </Tabs>
      <div className='tabs-ment-select'>
        {!props.isDisable ? (<><p onClick={downFile}>下载数据</p>
        {/* <div>
          <Select
            style={{ width: 150 }}
            placeholder="请选择"
            value={grainType}
            onChange={onChange}
          >
          <Option value={'request'} key={'1q'}>按请求量查看</Option>
          <Option value={'rdtio'} key={'1r'}>按比率查看</Option>
         </Select>
        </div> */}
        <div>
          <Select
            style={{ width: 150 }}
            placeholder="请选择"
            value={stepType}
            onChange={handleStepChange}
          >
           {options.map(item => {
              return (<Option value={item.value} key={item.value}>{item.name}</Option>)
           })}
         </Select>
        </div>
        <div>
            <Select
              style={{ width: 150 }}
              placeholder="请选择展示粒度"
              value={timeType}
              onChange={handleChange}
            >
             <Option disabled={isDisable} value={'1'}>每分钟</Option>
             <Option disabled={isDisable} value={'2'}>每5分钟</Option>
             <Option disabled={isDisable} value={'3'}>每30分钟</Option>
             <Option disabled={isDisable} value={'4'}>每小时</Option>
             <Option value={'5'}>每天</Option>
             <Option value={'6'}>每月</Option>
           </Select>
          </div></>) : (<>{''}</>)
          }
          <div>
            <Radio.Group
                value={typeSelect}
                onChange={getGroupChange}
            >
              <Radio.Button
                 value='1'
              >
                <Icon type='line-chart' />
              </Radio.Button>
              <Radio.Button
                 value='2'
              >
                <Icon type='bar-chart' />
              </Radio.Button>
            </Radio.Group>
          </div>
      </div>
    </div>
  )
}
export default Form.create()(tabsMent)